<template>
	<div class="wrap">
		<div class="pt" v-if="t1">
			<div class="pt-banner">
				<a href="javascript:history.go(-1)"><img src="static/images/170729_6i274ea9abf92b5b4g90fj50g248b_750x300.jpg_640x999.v1c96.70.webp" alt=""></a>
			</div>
			<ul class="pt-u1" ref="nav">
				<li @click="changeId(59540)" :class="{active:id==59540}">热销</li>
				<li @click="changeId(57899)" :class="{active:id==57899}">上新</li>
				<li @click="changeId(59917)" :class="{active:id==59917}">9.9封顶</li>
				<li @click="changeId(57903)" :class="{active:id==57903}">女装</li>
				<li @click="changeId(59305)" :class="{active:id==59305}">潮鞋</li>
				<li @click="changeId(59223)" :class="{active:id==59223}">美妆</li>
			</ul>
			<ul class="pt-u2">
				<li v-for="(item,index) in items" :key="index">
					<div class="item-img">
						<img :src="item.image" alt="">
					</div>
					<div class="pt-u2-d1">
						<p>{{item.title}}</p>
						<p><span class="price">￥{{item.discountPrice}}</span>&nbsp;<span class="through">￥{{item.price}}</span></p>
						<p class="group">{{item.ptUserCount}}人团·已团<span>{{item.pintuanItemSale}}</span>件</p>
						<router-link :to="{path:'Commodity',query:{deviceId:item.item_id}}" class="fixed">去拼团</router-link>
					</div>
				</li>
			</ul>
			
			<div class="totop" @click="top" v-show="isShow">
				<img src="static/images/idid_ifrwmmrrmyywinjqmmzdambqhayde_90x90.png" alt="">
			</div>
		</div>
		<div class="mypintuan" v-if="t2">
			<ul class="my-u1">
				<li class="act">待付款</li>
				<li>待成团</li>
				<li>已成团</li>
			</ul>
			<div class="mypintuan-d1">
				<img src="static/images/empty_orderlist-4f5604a6.png" alt="">
				<p>你还没有提交</p>
			</div>
		</div>
		<div class="rule" v-if="t3">
			 <p><img src="static/images/idid_ifrgmytegvrdmmbrmqzdambqmeyde_255x20.png" alt="">美丽说拼团规则<img src="static/images/idid_ifrgmytegvrdmmbrmqzdambqmeyde_255x20.png" alt=""></p>
			 <p><b>1、拼团有效期</b></p>
			 <p>拼团有效期是自开团时刻起24小时内，如果距离活动结束小于24小时，则以活动结束时间为准。</p>
			 <p><b>2、拼团成功</b></p>
			 <p>拼团有效期内，支付的用户达到参团人数，则拼团成功，商家开始进入发货流程。</p>
			 <p><b>3、拼团失败</b></p>
			 <p>拼团有效期后，未达到相应参团人数的团，则该团失败。</p>
			 <p>高峰期间，同时支付的人过多，团人数有限，美丽说以第三方支付信息时间先后为准，超出该团人数限制的部分团员则拼团失败。</p>
			 <p>拼团失败的订单，系统将在1-7个工作日内处理退款，系统处理后1-10个工作日内原路退回至原支付账户中</p>
			 <p><b>4、等待成团中如何退款？</b></p>
			 <p>拼团有效期后，未达到相应参团人数的团，则该团失败，系统自动退款。</p>
			 <p><b>5、商品承诺的发货时间</b></p>
			 <p>拼团会有拼团有效期，在拼团有效期内成团后商家进入发货阶段，因此参加拼团的商品承诺的发货时间，将以拼团成功时间为准开始计算。</p>
		</div>
		<ul class="pt-footer">
				<li>
					<img src="static/images/170628_42gafb00cbcbj7e1jf7ejjhkcla1h_78x70.png" alt="" @click="t1=true,t3=false,t2=false">
				</li>
				<li>
					<img src="static/images/170628_448hd2h8abih9e6da652dl8i21bag_78x72.png" alt="" @click="t2=true,t1=false,t3=false">
				</li>
				<li>
					<img src="static/images/170628_71ebe66b9a3a67kj4763hlf01ac7f_80x68.png" alt="" @click="t3=true,t1=false,t2=false">
				</li>
			</ul>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				items:[],
				id:59540,
				scrolled:0,
				x:1,
				isShow:false,
				m:0,
				t1:true,
				t2:false,
				t3:false
			}
		},
		mounted(){
			window.addEventListener('scroll', this.handleScroll);
			this.$http.jsonp("http://mce.mogucdn.com/jsonp/multiget/3",
				{params:{pids:59540}},{
					jsonp:"json"
				}).then(res=>{
					this.items = res.body.data["59540"].list;
				});
		},
		beforeDestroy() {
             window.removeEventListener('scroll', this.handleScroll);
        },
		methods:{
			changeId(n){
				this.id = n;
				this.scrolled = document.body.scrollTop = 0;
				this.$http.jsonp("http://mce.mogucdn.com/jsonp/multiget/3",
				{params:{pids:n}},{
					jsonp:"json"
				}).then(res=>{
					this.items = res.body.data[n].list;
				});
			},
			handleScroll(){
				if(this.t1==true){
					this.scrolled =document.body.scrollTop;
					let x = this.$refs.nav.offsetHeight
					if(x<this.scrolled){
					 	this.$refs.nav.style.position = "fixed";
					 	this.$refs.nav.style.top = "0rem";
					}else{
					 	this.$refs.nav.style.position = "relative"
					}
				}
                if(this.scrolled>667){
                	this.isShow = true
                }
                if(this.scrolled<667){
                	this.isShow= false;
                }
			},
			top(){
				document.body.scrollTop = 0;
			}
		}
	}
</script>
<style type="text/css" scoped>
	.pt-banner{
		width:100vw;
		height:5.5rem;
		overflow-y: hidden;
	}
	.pt-banner img{
		width:100vw;
	}
	.pt-u1{
		
		background: #fff;
		width:100vw;
		display: flex;
		flex-flow:nowrap row;
		justify-content:flex-start;
		z-index: 50;
	}
	.pt-u1 li{
		margin-left:.8rem;
		padding:.5rem 0;
		font-size:.6rem;
		font-weight: 200;
	}
	.pt-u1 .active{
		color:#ff6699;
		border-bottom:.2rem solid #ff6699;
	}
	.pt-u2 li{
		/*height:5rem;*/
		display: flex;
		flex-flow:wrap row;
		justify-content: center;
		align-items: center;
		padding:.5rem;
		font-size:.6rem;
		border-bottom:.1rem solid #eee;
	}
	.pt-u2 li:last-child{
		margin-bottom: 2rem;
	}
	.pt-u2 li .item-img{
		width:4.5rem;
		height:4.5rem;
		overflow-y: hidden;
	}
	.pt-u2 li img{
		margin-top:-1rem;
		width:4.5rem;
	}
	.pt-u2-d1{
		flex:1 1 4rem;
		position:relative;
		padding-left:.5rem;
		line-height: 1.2rem;
		/*width:60vw;*/
	}
	.pt-u2-d1 .price{
		color:#ff6699;
		font-size:1rem;
	}
	.pt-u2-d1 .through{
		text-decoration:line-through;
		color:#959595;
	}
	.pt-u2-d1 .group{
		color:#959595;
		font-size:.5rem;
	}
	.pt-u2-d1 .fixed{
		position: absolute;
		right:0rem;
		bottom:0rem;
		padding:0 1rem;
		background:#ff6699;
		color:#fff;
		border-radius:.8rem;
	}
	.pt-footer{
		position:fixed;
		bottom:0;
		width:100vw;
		height:2.5rem;
		display:flex;
		flex-flow:wrap;
		justify-content: space-around;
		align-items: center;
		background: #fff;
	}
	.pt-footer img{
		width:2rem;
	}
	.totop{
		position:fixed;
		right:.5rem;
		bottom:4rem;
	}
	.totop img{
		width:2rem;
	}
	.my-u1{
		padding:.5rem 0;
		width:100vw;
		display: flex;
		justify-content: space-around;
		flex-flow:wrap row;
		font-size: .6rem;
		background: #fff;
	}
	.my-u1 li{
		padding:.5rem 0;
	}
	.mypintuan-d1{
		width:100vw;
		display: flex;
		flex-flow:wrap column;
		justify-content: center;
		align-items: center;
		margin-top:2rem;
		font-size:.6rem;
	}
	.mypintuan-d1 img{
		width:4rem;
	}
	.mypintuan-d1 p{
		padding-top:1rem; 
	}
	.act{
		border-bottom:.1rem solid #eee;
	}
	.rule{
		width:100vw;
		display: flex;
		justify-content:flex-start;
		flex-flow:wrap row;
		margin-bottom:3rem;
	}
	.rule p{
		width:100vw;
		padding:0 1rem;
		font-size:.6rem;
		line-height: 1.2rem;
	} 
	.rule p img{
		width:3rem;
	}
	.rule p:first-child img:last-child{
		transform: rotate(180deg);
	}
	.rule p:first-child{
		text-align: center;
		padding:.5rem 0;
		font-size:.7rem;
	}
</style>